<template>
  <div>
    <div class="download-template-container">
      <el-button type="primary" size="small" @click="downloadTemplate">下载Excel模板</el-button>
    </div>
    <el-upload class="upload-demo" drag :action="url" multiple :on-success="handleSuccess" :headers="customHeaders" :data="uploadData">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        上传题目Excel文件，务必选择课程叶子节点
      </div>
    </el-upload>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getToken } from "@/utils/auth";
import host from "@/utils/host";

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: { 
    url: { type: String, default: "" },
    subjectId: { type: [Number, String], default: null }
  },
  data() {
    //这里存放数据
    return {
      address: "",
      customHeaders: {
        Authorization: getToken(),
      },
      uploadData: {},
      templateUrl: `http://${host}:9080/elearning/question/getTemplate`
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {
    subjectId: {
      handler(newVal) {
        if (newVal) {
          this.uploadData = { subjectId: newVal };
        }
      },
      immediate: true
    }
  },
  //方法集合
  methods: {
    downloadTemplate() {
      // 创建一个临时的a元素来触发下载
      const link = document.createElement('a');
      link.href = this.templateUrl;
      link.download = 'questions_template.xlsx'; // 设置下载文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      this.$message({
        message: "正在下载模板文件...",
        type: "success"
      });
    },
    handleSuccess(params) {
      if (params.code == 20000) {
        this.$message({
          message: `${params.message}`,
          type: "success",
        });
        this.$emit("shangChuanEvent", "success");
      } else {
        this.$message({
          message: `${params.message}`,
          type: "error",
        });
        return;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() { },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
.download-template-container {
  margin-bottom: 15px;
  text-align: right;
}
</style>